@import "../config/_variables.scss";

// 容器宽度、高度
$container-width: 400px;
$container-hieght: 270px;

.mala-swiper {
  position: relative;
  width: $container-width;
  height: $container-hieght;
  background-color: $gray-300;
  overflow: hidden;

  &-list {
    position: absolute;
    height: $container-hieght;
    display: flex;

    img {
      flex-shrink: 0;
      width: $container-width;
      height: $container-hieght;
    }
  }

  &-indicators {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;

    .mala-swiper-indicator {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: rgba(0, 0, 0, .5);
      margin: 8px;

      &-active {
        background-color: rgba(255, 0, 0, .5);
      }
    }
  }

  &-left, &-right {
    cursor: pointer;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    img {
      width: 100%;
      height: 100%;
      
      &:hover {
        box-shadow: 0 0 10px #ccc;
      }
    }
  }

  &-left {
    left: 5px;
  }

  &-right {
    right: 5px;
  }
}